// es2015出现了Proxy 代理器 Vue3.0中已经使用了proxy实现内部数据响应
// 代理可以理解为门卫,不管是要进去,还是要出去,都必须要经过他
// proxy接收两个参数 1.代理的目标对象, 2.代理的处理对象
// 处理对象中的常用方法
// get 监视属性访问
// 参数:代理的属性对象/ 外部访问的属性名
// set 监视设置属性
// 参数:代理的属性对象/ 外部访问的属性名/ 要赋的值

const person = {
    name: "jack",
    age: 18,
};

const personProxy = new Proxy(person, {
    get(target, property) {
        // 判断代理目标对象中是否存在要访问的属性
        target[property] ? target[property] : "没有定义";
        return target[property];
    },
    set(target, property, value) {
        // 内部可以做数据校验,检验age是不是整数
        if (property === "age") {
            if (!Number.isInteger(value)) {
                throw new TypeError(`${value} is not an int`);
            }
        }
        target[property] = value;
    },
});
// 通过代理对象写入sex属性和值
personProxy.sex = "man";
personProxy.age = 11;
console.log(personProxy.name); // jack
console.log(personProxy.sex); // man
console.log(personProxy.age); // 11

// deleteProperty 监控删除对象内某个属性
const proxy = new Proxy(person, {
    deleteProperty(target, property) {
        console.log("delete", property);
        // 内部这里不删除外部操作就算使用delete也是无法删除的
        delete target[property];
    },
});
// 外部操作,内部监控
delete proxy.age;
console.log(proxy); // { name: 'jack', sex: 'man' }

// proxy对数组的监视
const list = [];
const listProxy = new Proxy(list, {
    set(target, property, value) {
        console.log("set", property, value);
        target[property] = value;
        // 对象不return不会报错,数组监视set不return会报错TypeError:
        return true; // 表示设置成功
    },
});
listProxy.push(100);
// set 0 100
// set length 1
